var strHref = document.location.toString();//js获取url地址
// console.log(strHref);//打印出URL
var intPos = strHref.indexOf("?")+1;
// var strRight = strHref.substr(intPos + 1); //获取到右边的参数部分
strHref = strHref.substring(intPos)
var arr = strHref.split('&')
var obj = {}
for(let i =0; i<arr.length; i++){
    let str1 = arr[i].split('=')[0]
    let str2 = arr[i].split('=')[1]
    obj[str1] = str2
}
// console.log(obj);
// console.log(strRight);//获取到？后面的数据
// var obj ={}
// var str = strRight.split('=')[0]//shopId,前面的部分
// var str1 = strRight.split('=')[1]//后面的数字 即id
// obj[str1] = str2
// console.log(str1);
// var arrTmp = strRight.split("&");
// console.log(arrTmp[0]);
//显示商品详情
function visibilityGoods(){
    
    axios({
        url:'/home/productDetail/inGoodsPage',
        method:'GET',
        params:{
            goodsId: obj.goodsId
            // goodsId:118
            // goodsId:15
        }
    })
    .then(data => {
        // console.log(data);
        document.querySelector('.goodsInfoTitle h3').innerHTML = data.data.data.data.goodsName
        document.getElementsByClassName('goodsPriceReal')[0].innerHTML = data.data.data.data.goodsPrice
        document.getElementsByClassName('goodsPriceReal')[1].innerHTML = data.data.data.data.goodsPrice
        document.querySelector('.counterLeft strong').innerHTML = data.data.data.data.commentTotal
        document.querySelector('.counterRight strong').innerHTML = data.data.data.data.orderTotal
        document.querySelector('.hdShopName a').innerHTML = data.data.data.data.shopName
        document.querySelector('.hdShopKeeper dl dd a').innerHTML = data.data.data.data.shopperName
        document.querySelector('.smallImg img').src = data.data.data.data.image[0]
        document.getElementsByClassName('bigImg')[0].style.backgroundImage = "url("+data.data.data.data.image[0]+")"
        // 在这里加上一个image数组，存放图片数据
        let imgP = document.querySelector('.description p')
        imgP.innerHTML = ''
        let goodsInfoItemMinor = document.getElementsByClassName('goodsInfoItemMinor')[0]
        goodsInfoItemMinor.innerHTML = ''
        // 手动图片轮播
        for(let i = 0 ; i <data.data.data.data.image.length; i++){
            // console.log(1111);
            goodsInfoItemMinor.innerHTML += `
                <li>
                        <img class="minorPic" src="${data.data.data.data.image[i]}" alt="">
                    
                </li>
            `
            if(i==data.data.data.data.image.length-1){
                goodsInfoItemMinor.innerHTML +=`
                <div style="clear: both;"></div>
                `
            }
            imgP.innerHTML += `
                <img src="${data.data.data.data.image[i]}" alt="">
            `
        }
        // 颜色尺寸
        let sizeDl = document.getElementsByClassName('sizeDl')[0]
        let colorDl = document.getElementsByClassName('colorDl')[0]
        let colorClassifyUl = document.getElementsByClassName('colorClassifyUl')[0]
        let sizeUl = document.getElementsByClassName('sizeUl')[0]
        colorClassifyUl.innerHTML = ''
        for(let i = 0; i<data.data.data.data.goodsColorSize.length; i++){
            colorClassifyUl.innerHTML += `
            <li class="colorClassify">${data.data.data.data.goodsColorSize[i].color}</li>
            `
        }
        if(document.getElementsByClassName('colorClassify')){
            let colorClassify = document.getElementsByClassName('colorClassify')
            for(let i = 0; i<data.data.data.data.goodsColorSize.length; i++){
                for(let k = 0; k<colorClassify.length; k++){
                    colorClassify[k].addEventListener('click', function(){
                        sizeUl.innerHTML = ''
                        for(let j = 0; j<data.data.data.data.goodsColorSize[i].size.length; j++){
                        sizeUl.innerHTML += `
                            <li>${data.data.data.data.goodsColorSize[i].size[j]}</li>
                        `
                        // sizeChoose()
                        }
                        sizeChoose()
                    })
                }                 
            }
        }
        sizeChoose()
        
    })
    .catch( err => {
        console.log(err);
    })
}
visibilityGoods()

// 增减购买数量
function accountBuy(){
    let accountRecede = document.getElementsByClassName('accountRecede')[0]
    let accountAdd = document.getElementsByClassName('accountAdd')[0]
    let accountInput = document.getElementsByClassName('accountInput')[0]
    let i = accountInput.value
    accountRecede.onclick = function(){
        if(i<=1){
            accountRecede.classList.add('accountCommon')
            
        }else{
            i--
            accountInput.value = i
            if( i == 1){
                accountRecede.classList.add('accountCommon') 
            }
        }
    }
    accountAdd.onclick = function(){
        i++
        accountInput.value = i
        accountRecede.classList.remove('accountCommon')
    }
}
accountBuy()
//鼠标移至商品图片改变以及放大镜效果
function changePic(){
    let goodsInfoItemMinor = document.querySelector('.goodsInfoItemMinor'),
    minorPics = goodsInfoItemMinor.querySelectorAll('.minorPic');
    img = document.querySelector('.goodsInfoItemMain .smallImg img');
    let bigImg = document.querySelector('.bigImg')
    // document.querySelector('.goodsInfoItemMinor li').classList.add('minorPicBorder')
    goodsInfoItemMinor.addEventListener('mousemove', function(e){
        // console.log(e);
        // console.log(e.target);
        // console.log(e.target.tagName);   

        if(e.target.tagName == 'IMG'){
            // console.log(e.target.src);
            // console.log(img.src);
            img.src = e.target.src;
            // console.log(img.src === e.target.src);
            bigImg.style.backgroundImage = 'url('+e.target.src+')'
            minorPics.forEach(function(item){
                item.classList.remove('minorPicBorder')
            })
            e.target.classList.add('minorPicBorder')
        }
    })
    let smallImg = document.querySelector('.smallImg')
    let float = document.querySelector('.float')
    smallImg.addEventListener('mouseover', function(){
        bigImg.style.display = 'none'
           float.style.display = 'none'
    })
    // let bigImg = document.querySelector('.bigImg')
    smallImg.addEventListener('mousemove', function(e){
        // console.log(e.clientX,e.clientY);
        // e.clientX是鼠标到浏览器左侧的距离，e.clientY是鼠标到浏览器顶部的距离
        // console.log(smallImg.getBoundingClientRect().left);//图片至浏览器左侧的距离
        // console.log(smallImg.getBoundingClientRect().top);//图片至浏览器顶部的距离
        ex = e.clientX
        ey= e.clientY
        cx = smallImg.getBoundingClientRect().left
        cy = smallImg.getBoundingClientRect().top
        tx = ex - cx - 75
        ty = ey - cy -75
        // if()
        if(tx<0){
           tx = 0
           bigImg.style.display = 'none'
           float.style.display = 'none'
        }else{
            bigImg.style.display = 'block'
           float.style.display = 'block'
        }
        if(ty<0){
            ty= 0
            bigImg.style.display = 'none'
            float.style.display = 'none'
        }else{
            bigImg.style.display = 'block'
           float.style.display = 'block'
        }
        if(tx>250){
            tx =250
            bigImg.style.display = 'none'
            float.style.display = 'none'
        }else{
            bigImg.style.display = 'block'
           float.style.display = 'block'
        }
        if(ty>250){
            ty = 250
            bigImg.style.display = 'none'
            float.style.display = 'none'
        }else{
            bigImg.style.display = 'block'
           float.style.display = 'block'
        }
        float.style.left = tx + 'px'
        float.style.top = Math.ceil(ty) + 'px'
        bigImg.style.backgroundPosition = tx/250*100+'% '+ty/250*100+'%'

    })
}
changePic()

//宝贝详情与累计评论互换
function goodsOrCommend(){
    let goodsDetails = document.getElementsByClassName('goodsDetails')[0]
    let commend = document.getElementsByClassName('commend')[0]
    let innerWrapSer = document.getElementsByClassName('innerWrapSer')[0]
    let innerWrapCommend = document.getElementsByClassName('innerWrapCommend')[0]
    goodsDetails.addEventListener('click', function(){
        innerWrapCommend.style.display = 'none'
        innerWrapSer.style.display = 'block'
        goodsDetails.classList.add('selected')
        commend.classList.remove('selected')
    })
    commend.addEventListener('click', function(){
        innerWrapCommend.style.display = 'block'
        innerWrapSer.style.display = 'none'
        goodsDetails.classList.remove('selected')
        commend.classList.add('selected')
        // innerWrapSer.classList.remove('selected')
    })
}
goodsOrCommend()

// 尺码颜色数量的选择
function sizeChoose(){
    // if(document.getElementsByClassName('sizeUl')[0]&&sizeUl.querySelectorAll('li')){
        let sizeUl = document.getElementsByClassName('sizeUl')[0]
        let sizeLi = sizeUl.querySelectorAll('li')
        // console.log(sizeLi.length);
        // 尺码
        for(let i =0; i<sizeLi.length; i++){
           
            
            sizeLi[i].addEventListener('click', function(){
                for(let i = 0; i<sizeLi.length ; i++){
                    sizeLi[i].style.backgroundColor='#fff'
                    sizeLi[i].style.color ='#6c6c6c'
                    sizeLi[i].classList.remove('sizeLi')
                }
                sizeLi[i].style.backgroundColor='#F96C0C'
                sizeLi[i].style.color='white'
                sizeLi[i].classList.add('sizeLi')
                sizeFlag = 1
            })
        }
    // }
    // if(document.getElementsByClassName('colorClassifyUl')[0]&&colorClassifyUl.querySelectorAll('li')){
        //颜色
        let colorClassifyUl = document.getElementsByClassName('colorClassifyUl')[0]
        let colorLi = colorClassifyUl.querySelectorAll('li')
        // console.log(colorLi.length);
        for(let i = 0; i<colorLi.length; i++){
            colorLi[i].addEventListener('click', function(){
                for(let i = 0; i<colorLi.length ; i++){
                    colorLi[i].style.backgroundColor='#fff'
                    colorLi[i].style.color ='#6c6c6c'
                    colorLi[i].classList.remove('colorLi')
                }
                colorLi[i].style.backgroundColor='#F96C0C'
                colorLi[i].style.color='white'
                colorLi[i].classList.add('colorLi')
                colorFlag = 1
            })
        }
    // }
    
   
}
sizeChoose()

// let deleteGoodsInner = document.getElementsByClassName('deleteGoodsInner')[0]
// 加入购物车
//判断是否选择完整信息
var sizeFlag = 0;
var colorFlag = 0;
// addShoppingCart = document.getElementsByClassName('addShoppingCart')[0]
// addShoppingCart.addEventListener('click', function(){
// let addShoppingCart = document.getElementsByClassName('addShoppingCart')[0]
// document.getElementsByClassName('addShoppingCart')[0].addEventListener('click', function(){
//     if( sizeFlag == 0 || colorFlag == 0){
//         Pop()
//         document.getElementsByClassName('deleteGoodsInner')[0].innerHTML = '请选择完整的商品信息'
//     }else{
//             axios({
//                 url:'/home/productDetail/addCart',
//                 method:'GET',
//                 params:{
//                     count:1,
//                     goodsId: obj.goodsId,
//                     shopId: obj.shopId,
//                     userId:userId
//                 }
//             })
//             .then(data => {
//                 // carts = 0
//                 console.warn(11111111111);
//                 // console.log(data);
//                 cartTotal()
//                 Pop()
//                 document.getElementsByClassName('deleteGoodsInner')[0].innerHTML = '添加成功，在购物车中等您哦'
                
//             })
//             .catch(err => {
//                 console.log(err);
//             })
        
//     }
   
// }) 
function addCartFun(){
    if( sizeFlag == 0 || colorFlag == 0){
        Pop()
        document.getElementsByClassName('deleteGoodsInner')[0].innerHTML = '请选择完整的商品信息'
    }else{
        let accountInput = document.getElementsByClassName('accountInput')[0]
        console.log(userId);
            axios({
                url:'/home/productDetail/addCart',
                method:'GET',
                params:{
                    count:accountInput.value,
                    goodsId: obj.goodsId,
                    shopId: obj.shopId,
                    userId:userId
                }
            })
            .then(data => {
                // carts = 0
                console.warn(11111111111);
                // console.log(data);
                cartTotal()
                Pop()
                document.getElementsByClassName('deleteGoodsInner')[0].innerHTML = '添加成功，在购物车中等您哦'
                
            })
            .catch(err => {
                console.log(err);
            })
        
    }
   
}
// 立即购买
function nowBuy(){
    let purchase = document.getElementsByClassName('purchase')[0]
    purchase.addEventListener('click', () => {
        if( sizeFlag == 0 || colorFlag == 0){
            Pop()
            document.getElementsByClassName('deleteGoodsInner')[0].innerHTML = '请选择完整的商品信息'
        }else{
            let size = document.getElementsByClassName('sizeLi')[0].innerHTML
            let color = document.getElementsByClassName('colorLi')[0].innerHTML
            let count = document.getElementsByClassName('accountInput')[0].value
            window.location.href = `/home/productDetail/creatOrder?shopId=${obj.shopId}&goodsId=${obj.goodsId}&color=${color}&size=${size}&count=${count}`
            // 把shopId和goodsId都传到node层，在提交订单页面调用接口，获取商品基本信息
            
            // axios({
            //     url:'/home/productDetail/addCart',
            //     method:'GET',
            //     params:{
            //         count:1,
            //         // goodsId: obj.goodsId,
            //         // shopId: obj.shopId,
            //         goodsId: 15,
            //         shopId: 34,
            //         userId:15
            //     }
            // })
            // .then(data => {
            //     console.log(data);
            //     // alert('添加成功')
            //     window.location.href = '/home/productDetail/creatOrder'
            // })
            // .catch(err => {
            //     console.log(err);
            // })

        }
    })
}
nowBuy()

// 弹窗
function Pop(){
    let deleteIcon = document.getElementsByClassName('deleteIcon')[0]
    let noDelete = document.getElementsByClassName('noDelete')[0]
    let sureDelete = document.getElementsByClassName('sureDelete')[0]
    let actionDel = document.getElementsByClassName('actionDel')[0]
    let popBox = document.getElementsByClassName('popBox')[0]
    let deleteGood = document.getElementsByClassName('deleteGood')[0]
    
    // let 
    // actionDel.onclick = function(){
        popBox.style.opacity = '1'
        popBox.style.visibility = 'visible'
        deleteGood.innerHTML = '提示'
        // deleteGoodsInner.innerHTML = '请选择完整的商品信息'
    // }
    deleteIcon.onclick = function(){
        popBox.style.opacity = '0'
        popBox.style.visibility = 'hidden'
    }
    sureDelete.onclick = function(){
        popBox.style.opacity = '0'
        popBox.style.visibility = 'hidden'
    }
    noDelete.onclick = function(){
        popBox.style.opacity = '0'
        popBox.style.visibility = 'hidden'
    }
}

//遍历评论
function allComment(){
    let commentUl = document.getElementsByClassName('commentUl')[0];
    axios({
        url:'/home/productDetail/getAllCommentsByShopId',
        method:'GET',
        params:{
            shopId:obj.shopId
        }
    })
    .then( data => {
        // console.log(data);
        // console.log(data.data.data.length);
        // if(data.data.data.length === 0){
            
        // }
        commentUl.innerHTML = ` `
        for(let i= 0; i<data.data.data.length; i++){
            // console.log(data.data.data[i].path.length);
            commentUl.innerHTML += `
                    <li>
                    <div class="commendFormHead">
                            <i class="iconfont morentouxiang3" style="font-size: 30px;"></i>
                        
                        <div>${data.data.data[i].nickName}</div>
                    </div>
                    <div class="commendFormInfo">
                        <div class="commendFormInfoItem">
                            <div class="commendFormInfoContent">
                            ${data.data.data[i].gcomment}
                            </div>
                            <div class="commendFormInfoImg">
                                <ul class="commendInnerUl">
                                </ul>
                            </div>
                            <div class="commendFormInfoTime">
                                <div class="infoTimeContent">
                                    <span style="margin-right: 15px;">${data.data.data[i].time}</span>
                                    颜色分类：黑色（夹棉加厚&nbsp;&nbsp;尺码：均码
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                </li>
            `
            for(let j=0; j<data.data.data[i].path.length; j++){
                let commentArrImg = ''
                commentArrImg +=  `
                <li><img src="${data.data.data[i].path[j]}" alt=""></li>
                `
                if(j === data.data.data[i].path.length-1){
                    commentArrImg += `
                    <div style="clear: both;"></div>
                    `
                }   
                document.getElementsByClassName('commendInnerUl')[i].innerHTML += commentArrImg 
            }
            // for(let )
        }
    })
    .catch( err => {
        console.log(err);
    })
}
allComment()

//收藏宝贝
collectWord = document.getElementsByClassName('collectWord')[0]
collectIcon = document.getElementsByClassName('collectIcon')[0]

collectWord.onclick = function(){
    
    if(document.querySelector('.collectIcon i').getAttribute('collectionid') === null){

        axios({
            url:'/home/productDetail/collection/addCollection',
            method:'GET',
            params:{
                userId:userId,
                shopId:obj.shopId,
                goodsId:obj.goodsId
            }
        })
        .then(data=>{
            console.log(data);
            alert('收藏成功')
            document.querySelector('.collectIcon i').style.color = '#f40'
            // 在收藏成功的时候把收藏id显示出来
            document.querySelector('.collectIcon i').setAttribute('collectionid', `${data.data.data.data[0].collectionId}`)
            // document.querySelector('.collectIcon i').getAttribute('collectFlag', '1')
            collectFlag = 1
        })
    }else{
        axios({
            url:'/home/productDetail/collection/deleteCollection',
            method:'GET',
            params:{
                collectionId:document.querySelector('.collectIcon i').getAttribute('collectionid')
            }
        })
        .then(data => {
            console.log(data);
            document.querySelector('.collectIcon i').style.color = ''
            document.querySelector('.collectIcon i').removeAttribute('collectionid')
            alert('取消收藏成功')
            collectFlag = 0
        })
        .catch(err => {
            console.log(err);
        })
    }
}


